import React, { useState, useEffect } from "react";
import {
  Table,
  message,
  Form,
  type FormProps,
  Input,
  Modal,
  Button,
  Space
} from "antd";
import type { TableProps } from "antd";
import type { SearchProps } from "antd/es/input/Search";
import axios from "axios";
import "./index.css";
const { Search } = Input;
interface DataType {
  id: any;
  title: any;
  img: any;
  city: any;
}
type FieldType = {
  title?: any;
  img?: any;
  city?: any;
  id?: any;
};
type FieldType1 = {
  title?: string;
  img?: string;
  city?: string;
};

const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);

  const edit = (record: any) => {
    setIsModalOpen(true);
    const items = form.setFieldsValue(record);
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (record) => {
    axios.put("/api/edit", record).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
    setIsModalOpen(false);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    const item = form.getFieldsValue();
    console.log(item);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const showModal1 = () => {
    setOpen(true);
  };
  const handleOk1 = () => {
    setOpen(false);
  };
  const handleCancel1 = () => {
    setOpen(false);
  };

  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const del = (record: any) => {
    let id = record.id;
    axios.delete("/api/del", { params: { id } }).then((resp) => {
      console.log(resp);
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  const onFinish1: FormProps<FieldType1>["onFinish"] = (values) => {
    setOpen(false);
    axios.put("/api/add", values).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };
  const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
    axios.get("/api/search", { params: { value } }).then((resp) => {
      let { code, items } = resp.data;
      if (code == 200) {
        setList(items);
      } else {
        setList(items);
      }
    });
  };

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "Id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "图片",
      dataIndex: "img",
      key: "img",
      render: (_, record: any) => (
        <div>
          <img src={record.img} />
        </div>
      ),
    },
    {
      title: "城市",
      dataIndex: "city",
      key: "city",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => del(record)}>删除</a>
          <a onClick={() => edit(record)}>编辑</a>
        </Space>
      ),
    },
  ];

  const data: DataType[] = list;
  return (
    <div>
      <Button type="primary" onClick={showModal1}>
        添加
      </Button>
      <Search placeholder="请输入搜索的内容" onSearch={onSearch} enterButton />
      <Modal
        open={open}
        title="添加"
        onOk={handleOk1}
        onCancel={handleCancel1}
        footer={(_, { OkBtn, CancelBtn }) => (
          <>
            <OkBtn />
          </>
        )}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish1}
          autoComplete="off"
        >
          <Form.Item<FieldType1>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType1>
            label="Img"
            name="img"
            rules={[{ required: true, message: "Please input your img!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType1>
            label="City"
            name="city"
            rules={[{ required: true, message: "Please input your city!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="编辑"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            label="ID"
            name="id"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input disabled={true} />
          </Form.Item>
          <Form.Item<FieldType>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="Img"
            name="img"
            rules={[{ required: true, message: "Please input your img!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="City"
            name="city"
            rules={[{ required: true, message: "Please input your city!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Table columns={columns} dataSource={data} />
    </div>
  );
}
export default Index;
